<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function cli1(){
				var nameImg = document.getElementsByTagName("body")[0];
				nameImg.className = "img1";
			}
			function cli2(){
				var nameImg = document.getElementsByTagName("body")[0];
				nameImg.className = "img2";
			}
			function cli3(){
				var nameImg = document.getElementsByTagName("body")[0];
				nameImg.className = "img3";
			}
			function cli4(){
				var nameImg = document.getElementsByTagName("body")[0];
				nameImg.className = "img4";
			}
			function cli5(){
				var nameImg = document.getElementsByTagName("body")[0];
				nameImg.className = "img5";
			}
		</script>
		<style type="text/css">
			.img1{
				background-image: url(../img/1.jpg);
			}
			.img2{
				background-image: url(../img/2.jpg);
			}
			.img3{
				background-image: url(../img/3.jpg);
			}
			.img4{
				background-image: url(../img/4.jpg);
			}
			.img5{
				background-image: url(../img/5.jpg);
			}
		</style>
	</head>
	<body>
		<div style="text-align: center;background-color: rgb(98,131,175,0.4);">
		<img src="../img/1.jpg" onclick="cli1()" style="width: 100px;height: 100px;"/>
		<img src="../img/2.jpg" onclick="cli2()" style="width: 100px;height: 100px;"/>
		<img src="../img/3.jpg" onclick="cli3()" style="width: 100px;height: 100px;"/>
		<img src="../img/4.jpg" onclick="cli4()" style="width: 100px;height: 100px;"/>
		<img src="../img/5.jpg" onclick="cli5()" style="width: 100px;height: 100px;"/>
		</div>
	</body>
</html>
